<template>
    <div class="common-layout">
            <el-config-provider :size="size"  :locale="locale=='zh'?zhCn:en">
                <el-container>
                    <el-aside width="auto" height="100vh">
                        <el-scrollbar height="100vh">
                            <!-- 左边菜单部分-->
                            <TreeMenu :is-collapse="isCollapse"></TreeMenu>
                        </el-scrollbar>
                    </el-aside>
                    <!-- 右边部分 -->
                    <el-container>
                        <el-header>
                            <div class="header-nva">
                                <!-- 头部面包屑 
                                    子组件传递了一个属性过来
                                -->
                                <HeaderBreadcrumb @change-collapse="isCollapse=$event"></HeaderBreadcrumb>
                                <div class="header-right">
                                     <!-- 全屏切换 -->
                                    <ScreenFull></ScreenFull>
                                    <el-divider direction="vertical" />
                                    <!-- 字体切换 
                                        子组件传递了一个属性过来
                                    -->
                                    <SizeChange @change-size="size=$event"></SizeChange>
                                    <el-divider direction="vertical" />
                                    <!-- 换肤 -->
                                    <ThemPicker></ThemPicker>
                                    <el-divider direction="vertical" />
                                    <!-- 中英文切换 -->
                                    <I18n></I18n>
                                    <el-divider direction="vertical" />
                                    <!-- 用户信息 -->
                                    <UserHeader></UserHeader>
                                </div>
                            </div>
                            <!-- 标签页 -->
                            <div class="tag-list">
                                <el-scrollbar width="100vw">
                                    <HeaderTags></HeaderTags>
                                </el-scrollbar>
                            </div>
                        </el-header>
                        <el-main >
                            <router-view />
                        </el-main>
                    </el-container>
                </el-container>
            </el-config-provider>
    </div>
</template>
<script lang="ts" setup>
// import menus from "@/router/page";
import TreeMenu from "@/components/navigation/TreeMenu.vue"; //左侧菜单栏组件
import HeaderBreadcrumb from "@/components/navigation/HeaderBreadcrumb.vue"; //面包屑组件
import HeaderTags from "@/components/navigation/HeaderTags.vue"; //标签页组件
import ScreenFull from "@/components/screenfull/ScreenFull.vue"; //切换全屏组件
import ThemPicker from "@/components/thempicker/ThemPicker.vue"; //换肤组件
import SizeChange from "@/components/sizechange/SizeChange.vue"; //切换字体组件
import I18n from "@/components/i18n/i18n.vue"; //切换中英文
import UserHeader from "@/components/userheader/UserHeader.vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { computed, ref } from 'vue'


import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
//菜单是否折叠
const isCollapse = ref(false)
let size = ref(localStorage.getItem("size") || "default")
const changeSize = (_size: string) => {
    size.value = _size
}

//计算属性:当前语言
const locales = computed(()=>{
    if("zh"===locales.value){
        return zhCn;
    }
    return en;
})

</script>
<style scoped lang="less">
.common-layout {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    //右边上面部分
    .el-header {
        min-height: 120px;
        padding: 0px;
        background-color: #fff;

        .header-nva {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 20px;

            .header-right {
                display: flex;
                align-items: center;
            }
        }

        .header {
            display: flex;
            min-height: 60px;
        }

        .tag-list {
            width: 100%;
            min-height: 60px;
            display: flex;
            padding-left: 12px;
            align-items: center;
            border: 1px solid #d8d9db;

            &::v-deep .el-scrollbar__view {
                min-height: 60px;
                display: flex;
                align-items: center;
            }

            .block-col-2 .demonstration {
                display: block;
                color: var(--el-text-color-secondary);
                font-size: 14px;
                margin-bottom: 20px;
            }
        }
    }

    .el-main {
       padding: 0px;
       padding-left: 20px;
       margin-top: 5px;
    }
}
</style>